<template>
  <div>
    <el-divider content-position="left">视频列表</el-divider>
    <div style="width: 50%; margin-left: 20%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="ID">
          <el-input
            v-model="form.id"
            style="width: 20%; margin-right: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.info"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-select
            style="margin-left: -62%"
            v-model="form.subId"
            placeholder="请选择"
          >
            <el-option
              v-for="(sub, index) in subList"
              :key="index"
              :label="sub.subName"
              :value="sub.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <div class="block" style="margin-right: 80%">
            <el-date-picker
              v-model="dateBetween"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-divider content-position="left"
        ><router-link :to="{ name: 'AdminAddUpdate', query: { add: 'add' } }"
          >添加</router-link
        ></el-divider
      >

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="id" label="ID" width="60">
        </el-table-column>
        <el-table-column prop="info" label="名称" width=""> </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="dateFormatter"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          :formatter="dateFormatter"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="url" label="视频" width="">
          <template slot-scope="scope">
            <video width="300" height="160" controls :src="scope.row.url">
              <!-- <source
                :src="require('@/assets/video/' + scope.row.url)"
                type="video/mp4"
              />
              <source
                :src="require('@/assets/video/' + scope.row.url)"
                type="video/ogg"
              />
              <source
                :src="require('@/assets/video/' + scope.row.url)"
                type="video/webm"
              /> -->
            </video>
          </template>
        </el-table-column>
        <el-table-column prop="img" label="图片" width="">
          <template slot-scope="scope">
            <el-image
              style="width: 280px; height: 120px"
              :src="scope.row.img"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="notes" label="说明" width=""> </el-table-column>
        <el-table-column prop="subId" label="类别Id" width="">
          <!-- <template slot-scope="scope"> </template> -->
        </el-table-column>
        <el-table-column prop="subName" label="类别" width="">
          <!-- <template slot-scope="scope"> </template> -->
        </el-table-column>
        <el-table-column prop="count" label="点击量" width="80">
        </el-table-column>

        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button @click="handleUpdate(scope.row)" type="text" size="small"
              >编辑</el-button
            >

            <el-button
              @click="handleDeleteById(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="查看信息"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
      @opened="openMethods"
    >
      <div>ID: {{ id }}</div>
      <div>名称：{{ info }}</div>
      <div>
        url:
        <video width="800" height="600" controls :src="piv">
          <!-- <source :src="piv" type="video/mp4" />
          <source :src="piv" type="video/ogg" />
          <source :src="piv" type="video/webm" /> -->
        </video>
      </div>
      <div id="viewImg">
        <div>名称：{{ info }}</div>
        图片：<el-image
          style="width: 400px; height: 300px"
          :src="pic"
        ></el-image>
      </div>
      <div>说明：{{ notes }}</div>
      <div>创建时间：{{ createTime }}</div>
      <div>更新时间：{{ updateTi }}</div>
      <div>点击量：{{ count }}</div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getListInfoByVo } from "@/api/info";
import { deleteInfo } from "@/api/info";
import { getSubList } from "@/api/sub";
import router from "@/router";
import Cookies from "js-cookie";
export default {
  name: "AdminView",
  methods: {
    openMethods() {
      // dialog添加元素
      this.pic = this.img;
      this.piv = this.url;
    },
    // 获得所有视频列表
    getInfoList() {
      const cook = Cookies.get("expire");
      //console.log("cook===>", cook);
      if (!cook) {
        router.push("/");
      }
      const c = {
        page: this.page,
        size: this.size,
      };
      getListInfoByVo(c).then((res) => {
        //console.log("getListInfoByVo==>", res);
        this.tableData = res.data.list;

        this.total = res.data.total;
      });
    },
    handleClick(row) {
      this.centerDialogVisible = true;
      this.id = row.id;
      this.info = row.info;
      this.img = row.img;
      this.notes = row.notes;
      this.url = row.url;
      this.createTime = row.createTime;
      this.updateTi = row.updateTime;
      this.count = row.count;
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 使用this.form获取表单数据进行提交操作
          const c = {
            id: this.form.id === "" ? null : this.form.id,
            info: this.form.info === "" ? null : this.form.info,
            subId: this.form.subId === "" ? null : this.form.subId,
            createTime: this.dateBetween[0] === "" ? null : this.dateBetween[0],
            endTime: this.dateBetween[1] === "" ? null : this.dateBetween[1],
            page: this.page,
            size: this.size,
          };
          console.log("ccc=>", c);
          getListInfoByVo(c).then((res) => {
            this.tableData = res.data.list;
            this.total = res.data.total;
          });
          // 执行提交操作...
        } else {
          //console.log("表单失败");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.form.subId = "";
      this.form.info = "";
      this.form.id = "";
      this.dateBetween = "";
      //console.log(formName);
      this.$refs[formName].resetFields();
    },
    dateFormatter(row, column, cellValue) {
      if (cellValue === null) {
        return "";
      }
      const date = new Date(cellValue);
      return date.toLocaleDateString(); // 根据需要格式化日期
    },

    handleCurrentChange(val) {
      const c = {
        id: this.form.id === "" ? null : this.form.id,
        info: this.form.info === "" ? null : this.form.info,
        subId: this.form.subId === "" ? null : this.form.subId,
        createTime: this.dateBetween[0] === "" ? null : this.dateBetween[0],
        endTime: this.dateBetween[1] === "" ? null : this.dateBetween[1],
        page: val,
        size: this.size,
      };
      //console.log(c);
      getListInfoByVo(c).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    // 页面大小改变时触发
    handleSizeChange(val) {
      this.size = val;
      // 可以在这里进行数据请求，获取新的数据
    },
    handleDeleteById(val) {
      const c = {
        id: val.id,
      };
      deleteInfo(c).then((res) => {
        //console.log(res);
        if (res.code === 0) {
          this.getInfoList();
          this.$message({
            showClose: true,
            message: "删除成功",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "warning",
          });
        }
      });
    },
    handleUpdate(val) {
      // 使用Vue Router的push方法来进行带数据跳转
      //console.log("val---->", val);
      router.push({ name: "AdminAddUpdate", params: val });
    },
    // 获得所有科目
    getSubs() {
      getSubList().then((res) => {
        if (res.code === 0) {
          this.subList = res.data;
        }
      });
    },
  },
  created() {
    this.getInfoList();
    this.getSubs();
  },
  data() {
    return {
      subList: [],
      dateBetween: "",
      form: {
        id: "",
        info: "",
        subId: "",
      },

      page: 1,
      size: 20,
      total: 0,
      tableData: [],
      centerDialogVisible: false,
      id: "",
      info: "",
      url: "",
      img: "",
      notes: "",
      subId: "",
      createTime: "",
      updateTi: "1111-11-11",
      count: "",
      pic: "",
      piv: "",
    };
  },
};
</script>

<style scoped></style>
